﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>Ecology</title>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="js/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->

</head>
<body>
<div class="page-wrapper">
    <div class="preloader"></div>
    <header class="main-header">
    	<div class="top-bar">
        	<div class="top-container">
                 <div class="info-outer">
                    <ul class="info-box clearfix">
                        <li><a href="/user/logout">退出登录</a></li>
                        <li><a href="userCenterPage" th:text="${res.user.username}"></a></li>
                    </ul>
                 </div>
            </div>
        </div>
        <div class="header-upper">
            <div class="auto-container clearfix">
                <div class="logo" style="width: 20%">
                    <a href="#"><img src="images/logo-1.png" alt="Ecology"></a>
                 </div>
                <div class="nav-outer clearfix">
                    <nav class="main-menu">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="navbar-collapse collapse clearfix">
                            <ul class="navigation">
                                <li><a href="#" style="color: #0F9E5E">管理土地</a></li>
                                <li><a href="cropTypePage">管理农作物种类</a></li>
                                <li><a href="uploadCropsPage">管理农作物</a></li>
                                <li><a href="seePage">实时监控</a></li>
                                <li><a href="medicinePage">植物农药管理</a></li>
                                <li><a href="messagePage">通知公告</a></li>
                                <li><a href="searchAudit">用户审批</a></li>
                                <li><a href="userPage">人员管理</a></li>
                                <li><a href="userCenterPage">个人中心</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <section class="donation-section">
        <div class="donation-form-outer">
<!--            <form form-group col-lg-6 col-md-6 col-xs-12 method="post" action="uploadCrops" enctype="multipart/form-data">-->
                <br>
                <!--Form Portlet-->
                <center>
                    <h4 th:text="${res.t.areaName} + ' 土地信息('+${res.t.useStatus}+')'"></h4>
                    <div>
                        <div>
                            <span id = 's1' th:onclick="javascript:getPic([[${res.t.id}]], [['s1']])">土地-植物</span>&nbsp;&nbsp;&nbsp;&nbsp;
                            <span id = 's2' th:onclick="javascript:getLine([[${res.t.id}]], [['s2']])">土地-环境</span>
                        </div>
                    </div>
                </center>
            <div class="theme-btn btn-style-two" style="float: right; border-radius: 5px; padding-top: 5px; padding-bottom: 5px;">
                <a href="areaPage" style="color: #afd9ee;font-weight:bold">返回</a>
            </div>
        </div>
    </section>
    <div style="text-align: center; margin: 0 auto; height: 200%; width: 50%">
        <div id = 'pic' style="width: 100%;height: 400%"></div>
    </div>
</div>


<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target=".main-header"><span class="fa fa-long-arrow-up"></span></div>

<script>
    let lastAction = "";
    function changeColor(target) {
        let nowAction = document.getElementById(target);
        if(lastAction !== ""){
            lastAction.style.color='black';
        }
        nowAction.style.color='green';
        lastAction = nowAction;
    }
    function getPic(id, target) {
        changeColor(target);
        let crops, counts;
        $.ajax({
            url : `/draw/pic?id=${id}`,
            type : 'get',
            async : false,
            dataType : "json",
            success: function (json) {
                if(json != null){
                    crops = json.crops;
                    counts = json.counts;
                }
            }
        });
        let picChart = echarts.init(document.getElementById('pic'));
        let picData = getData();
        picOption = {
            title: {
                text: '土地-植物关系图',
                subtext: '饼图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: picData.legendData,
                selected: picData.selected
            },
            series: [
                {
                    name: '信息',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: picData.seriesData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        function getData() {
            return {
                legendData: crops,
                seriesData: getSeriesData(crops, counts),
                selected: crops
            };
        }
        picChart.clear();
        picChart.setOption(picOption);
    }

    function getSeriesData(crops, counts) {
        let res = [];
        for(let i in crops){
            let cur = {name: crops[i], value: counts[i]};
            res.push(cur);
        }
        return res;
    }

    function getLine(id, target) {
        changeColor(target);
        let shiduList, wenduList, title;
        $.ajax({
            url : `/draw/line?id=${id}`,
            type : 'get',
            async : false,
            dataType : "json",
            success: function (json) {
                console.log(json);
                if(json != null){
                    shiduList = json.shiduList;
                    wenduList = json.wenduList;
                    title = json.title;
                }
            }
        });
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data: ['蒸发量', '降水量', '平均温度']
            },
            xAxis: [
                {
                    type: 'category',
                    data: title,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '水量',
                    min: 0,
                    max: 250,
                    interval: 50,
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
                {
                    type: 'value',
                    name: '温度',
                    min: 0,
                    max: 40,
                    interval: 5,
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                }
            ],
            series: [
                {
                    name: '降水量',
                    type: 'bar',
                    data: shiduList
                },
                {
                    name: '平均温度',
                    type: 'line',
                    yAxisIndex: 1,
                    data: wenduList
                }
            ]
        };
        let lineChart = echarts.init(document.getElementById('pic'));
        lineChart.clear();
        lineChart.setOption(option);
    }
</script>
<!--Donate Popup-->

<!-- /.modal -->

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/wow.js"></script>
<script src="js/script.js"></script>
</body>
</html>
